<template>
    <div class="about">
        <h1>环信用户列表</h1>
        <h2>用户列表：</h2>
        <h2 v-html="userListAction"></h2>
        <div class="searchbar">
            <el-row class="pt20">
                <el-col :span="12">
                    <el-button size="mini" @click="init()">刷新</el-button>
                    <!--<el-button size="mini" @click="backurl()">后退</el-button>-->
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">

                        <el-form-item label="">
                            <el-input v-model="formInline.keyword" size="mini" placeholder="请输入账号名称或者电话号码"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" size="mini" @click="serach">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
        <div class="from_box">
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id"
                      :header-cell-style="{background:'#f9f9f9'}" stripe default-expand-all
            >
                <el-table-column prop="uuid" label="标识字段"></el-table-column>
                <el-table-column prop="type" label="用户类型"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="nickname" label="昵称"></el-table-column>
                <el-table-column prop="activated" label="是否激活" :formatter="isLockFormatter"></el-table-column>
                <el-table-column prop="created" label="创建时间"></el-table-column>
                <el-table-column prop="modified" label="修改时间"></el-table-column>
                <el-table-column prop="uid" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" icon="el-icon-edit" perms="edit" label="编辑"
                                    @click="edit(scope.row)"></el-button>
                        <el-button type="text" size="mini" icon="el-icon-delete" perms="del" label="删除"
                                    @click="del(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--<span class="but" @click="onSubmit1()">获取</span>-->
        </div>
        <div class="block">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog v-dialogDrag :visible.sync="open" width="600px" append-to-body
                   :title="!formdata.uuid ? '新增用户' : '编辑用户' + formdata.username">
            <el-form :model="formdata" ref="ruleForm">
                <el-col :span="12">
                    <el-form-item label="用户昵称" prop="password">
                        <el-input v-model="formdata.nickname" placeholder="请输入用户昵称" size="small" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户头像" prop="avatar">
                        <el-input v-model="formdata.avatar" placeholder="请输入用户头像网址" size="small" />
                        <div class="uploadcol" style="width: 100px;">
                            <div class="uploadborder" @click="openUpload()" style="width: 100px;height: 100px;">
                                <el-image style="width: 100px; height: 100px" :src="formdata.avatar" fit="contain"
                                          v-if="formdata.avatar"></el-image>

                                <i class=" fa fa-image" v-if="!formdata.avatar"></i>
                            </div>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户手机" prop="password">
                        <el-input v-model="formdata.phone" placeholder="请输入用户手机" size="small" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户邮箱" prop="password">
                        <el-input v-model="formdata.mail" placeholder="请输入用户邮箱" size="small" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户性别" prop="gender">
                        <el-radio-group v-model="formdata.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户签名" prop="sign">
                        <el-input v-model="formdata.sign" placeholder="请输入用户签名" size="small" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户生日" prop="birth">
                        <el-input v-model="formdata.birth" placeholder="请输入用户生日" size="small" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户自定义" prop="ext">
                        <el-input v-model="formdata.ext" placeholder="请输入用户自定义" size="small" />
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click="SaveEdit">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    let _self;
    import {
        getUserList,
        delUser,
        editUsertype,
        getUsertype
    } from '../api/im/imapi';
    /*
                <el-table-column prop="uuid" label="标识字段"></el-table-column>
                <el-table-column prop="type" label="用户类型"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="nickname" label="昵称"></el-table-column>
                <el-table-column prop="activated" label="是否激活" :formatter="isLockFormatter"></el-table-column>
                <el-table-column prop="created" label="创建时间"></el-table-column>
                <el-table-column prop="modified" label="修改时间"></el-table-column>
                        editForm.avatar = res.data.avatar
                        editForm.phone = res.data.phone
                        editForm.mail = res.data.mail
                        editForm.gender = res.data.gender
                        editForm.sign = res.data.sign
                        editForm.birth = res.data.birth
                        editForm.ext = res.data.ext
    */
    export default {
        data() {
            return {
                regAction: "",
                userListAction: "消息栏",
                loading: false,
                tableData: [{
                    username: "",
                    nickname: "",
                    uuid: "",
                    type: "",
                    activated: "",
                    created: "",
                    modified: ""
                }],
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                serachword: '',
                formInline: {},
                open: false,
                open2: false,
                mychartshow: true,
                showPreNext: false,
                showPre: false,
                showNext: false,
                labelConfigLists: [],
                divCount:'',
                boxs:[],
                imgopen: false,
                imgshow: false,
                questions:[],
                questionshow: false,
                formdata: {
                    username: '',
                    nickname: '',
                    avatar: '',
                    phone: '',
                    mail: '',
                    gender: 0,
                    sign: '',
                    birth: '',
                    ext: '',
                    uuid: ''
                },
                formLabelWidth: '120px',
                rules: {
                    /*name: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
                    ]*/
                }
            }
        },
        created() {
            _self = this;
            // 初始化获取列表数据
            this.init();
        },
        mounted() {
            this.init();
        },
        methods: {
            init:function() {
                _self.loading = true;
                _self.tableData = [];
                getUserList('limit=3').then(response => {
                    const tabledata1 = response.data.entities;
                    _self.tableData = tabledata1;
                });
            },
            openUpload() {
                this.uploadLogo = true;
            },
            serach: function() {
                _self.serachword = _self.formInline.keyword;
                _self.init();
            },
            handleSizeChange: function(e) {
                console.log(e);
                _self.pageSize = e;
                _self.init();
            },
            handleCurrentChange: function(e) {
                console.log(e);
                _self.pageNumber = e;
                _self.init();
            },
            handleSelectionChange: function(e) {
                console.log(e);
                let selectChang = []
                for (let item of e) {
                    selectChang.push(item.role_id)

                }
                _self.multipleSelection = selectChang;
                console.log(selectChang);
            },
            handleClose () {
                this.$refs.ruleForm.resetFields()
                this.formdata = {
                    username: '',
                    nickname: '',
                    avatar: '',
                    phone: '',
                    mail: '',
                    gender: 0,
                    sign: '',
                    birth: '',
                    ext: '',
                    uuid: ''
                }
            },
            SaveEdit () {
                editUsertype(this.formdata.username,this.formdata).then((res) => {
                    //console.log(res)
                    if (res.status == 200) {
                        this.userListAction = '用户编辑成功'
                        _self.open = false;
                    } else {
                        this.userListAction = '失败：' + res.error
                        _self.open = false;
                    }
                })
            },
            isLockFormatter(row) {
                if(row.activated){
                    return "已激活"
                }else {
                    return "未激活"
                }
            },
            del: function(data) {
                _self.$confirm('确定删除【' + data.username + '】这个用户吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delUser(data.username).then((res) => {
                        //console.log(res)
                        if (res.status == 200) {
                            this.userListAction = '用户删除成功'
                            _self.init();
                        } else {
                            this.userListAction = '失败：' + res.error
                            //_self.msgError(res.msg);
                        }
                    })

                }).catch((res) => {
                    this.userListAction = '失败：' + res.error
                });
            },
            edit: function(data) {
                let editForm = {
                    uuid: data.uuid,
                    username: data.username,
                    nickname: '',
                    avatar: '',
                    phone: '',
                    mail: '',
                    gender: 0,
                    sign: '',
                    birth: '',
                    ext: ''
                }
                Object.assign(this.formdata, editForm);
                getUsertype(data.username).then((res) => {
                    //console.log(res)
                    if (res.status == 200) {
                        if(res.data.data.nickname != '' && res.data.data.nickname != undefined){this.formdata.nickname = res.data.data.nickname}
                        if(res.data.data.avatar != '' && res.data.data.avatar != undefined){this.formdata.avatar = res.data.data.avatar}
                        if(res.data.data.phone != '' && res.data.data.phone != undefined){this.formdata.phone = res.data.data.phone}
                        if(res.data.data.mail != '' && res.data.data.mail != undefined){this.formdata.mail = res.data.data.mail}
                        if(res.data.data.gender != '' && res.data.data.gender != undefined){this.formdata.gender = parseInt(res.data.data.gender)}
                        if(res.data.data.sign != '' && res.data.data.sign != undefined){this.formdata.sign = res.data.data.sign}
                        if(res.data.data.birth != '' && res.data.data.birth != undefined){this.formdata.birth = res.data.data.birth}
                        if(res.data.data.ext != '' && res.data.data.ext != undefined){this.formdata.ext = res.data.data.ext}
                    } else {
                        this.userListAction = '获取用户属性失败：' + res.error
                        //_self.msgError(res.msg);
                    }
                })
                _self.open = true;
            },
        }

    }
</script>